<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    webpack 
    1. 全局安装  （缺点：只能安装某一个版本）
       npm i webpack@5.49.0 webpack-cli@4.7.2 -g    安装
       npm uni webpack@5.49.0 webpack-cli@4.7.2 -g  删除

       直接使用命名   webpack

    2. *** 本地安装（好处：不同的文件夹可以安装不同的版本）
      npm install webpack@5.49.0 webpack-cli@4.7.2  (wbk)

      方法1***：找到 package.json ---》"scripts" 配置脚本命令

      "scripts": {
        "serve":"webpack"
      }

     执行配置的脚本命令（黑框）  npm run serve
     
     方法2（了解）：npx webpack （webpack5版本及以上）

     默认打包的js是src目录下index.js为入口文件----》dist文件夹main.js为打包后的出口文件


    3.自己配置文件（入口 出口）
    在根目录下创建  webpack.config.js（先以）

    const path=require("path");//nodejs的路径模块

  module.exports={
      entry:"./src/index.js",//入口文件路径
      output:{//出口
          filename:"index.js",//文件名称
          path:path.resolve(__dirname,"dist")//在wbk的跟目录下，创建一个dist文件夹
      },
      mode:"production"// development 开发环境（不会压缩）   production 生产环境（压缩）
  }

  执行不同的脚本命名做不同的打包，分开发环境和生产环境
方法1：
  根据不同的环境，配置不同的文件
  webpack.config.development.js
  const path=require("path");//nodejs的路径模块

  module.exports={
      entry:"./src/index.js",//入口文件路径
      output:{//出口
          filename:"index.[hash].js",//文件名称
          path:path.resolve(__dirname,"dist")
      },
      mode:"development"//开发环境
  }

  webpack.config.production.js
  const path=require("path");//nodejs的路径模块

  module.exports={
      entry:"./src/index.js",
      output:{//出口
          filename:"index.[hash].min.js",
          path:path.resolve(__dirname,"dist")
      },
      mode:"production"//生产环境
  }


需要重新配置脚本命令
package.json    --config：指定执行某个文件

"scripts": {
    "serve": "webpack --config webpack.config.development.js",
    "build": "webpack --config webpack.config.production.js"
 }
运行： npm run serve 开发环境   npm run build  生产环境

方法2：
npm i cross-env --save-dev

webpack.config.js

const path=require("path");//nodejs的路径模块
let NODE_ENV=process.env.NODE_ENV||"production";
module.exports={
    entry:"./src/index.js",//入口文件路径
    output:{//出口
        filename:NODE_ENV==="production"?"end.[hash].min.js":"end.[hash].js",
        path:path.resolve(__dirname,"dist")
    },
    mode:NODE_ENV
}

"scripts": {
  "D":"cross-env NODE_ENV=development webpack",
  "P":"cross-env NODE_ENV=production webpack"
}
运行： npm run D 开发环境    npm run P  生产环境


1. 生成html文件

1. npm i html-webpack-plugin -–save-dev
2. webpack.config.js 使用插件
const path=require("path");//nodejs的路径模块

let NODE_ENV=process.env.NODE_ENV||"production";
//导入 插件
let  HtmlWebpackPlugin=require("html-webpack-plugin");

module.exports={
    entry:"./src/index.js",//入口文件路径
    output:{//出口
        filename:NODE_ENV==="production"?"end.[hash].min.js":"end.[hash].js",
        path:path.resolve(__dirname,"dist")
    },
    mode:NODE_ENV,
    plugins:[//使用插件
       new HtmlWebpackPlugin()
    ]
}
3. 默认会在dist目录里面生成一个index.html

1. 使用自己的 html 文件
//添加属性配置
new HtmlWebpackPlugin({
  template: './public/index.html',//指定自己的html文件
  filename: 'index.html',//生成的html的文件名称
  hash:true,//给引入的文添加hash值
  minify: {
      collapseWhitespace: true,//去掉html内容空格
      removeComments: true,//去掉注释
      removeAttributeQuotes: true,//去掉属性的引号
      removeEmptyAttributes: true//属性值为空的去掉
  }
})


配置热更新
devServer:{
  port:"8080",//端口号
  host:"127.0.0.1",//域名
  static: {//打开页面的路径
      directory: path.join(__dirname, 'dist'),
  },
  hot:true,//是否热更新
  open:true,//是否自动打开页面
  proxy:{//配置跨域代理
      "/": {
          target: "https://www.jianshu.com",
          changeOrigin: true //伪装访问源
      }
  }
}

"scripts": {
  "serve":"webpack server", 
  "build":"webpack"
}

运行  npm run serve 开发环境    npm run build 生产环境


</body>
</html>